<template>
  <div class="standard-item-detail">
    <el-table
      :data="itemTree"
      style="width: 100%;margin-bottom: 20px;"
      default-expand-all
      row-key="Id"
      :show-header="false"
      :tree-props="{children: 'ChildrenList', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="Title">
        <template slot-scope="scope">
          <el-input v-model="scope.row.Title" style="width: 400px" />
        </template>
      </el-table-column>
      <el-table-column prop="Value" width="120px">
        <template slot-scope="scope">
          <el-input v-model="scope.row.Value" placeholder="请输入值" />
        </template>
      </el-table-column>
      <el-table-column prop="Prop List" width="300px">
        <template slot-scope="scope">
          <el-select v-model="scope.row.PropIdList" multiple class="full-width" @focus="onSelectPropIdList(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column width="150px">
        <template slot-scope="scope">
          <el-upload class="upload-demo" action="" multiple :on-exceed="handleExceed" :file-list="scope.row.FileList" >
            <el-link size="mini" type="info" :underline="false">上传附件</el-link>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column width="80px">
        <template slot-scope="scope">
          <el-link type="success" :underline="false" icon="el-icon-setting" @click="onConfigNode(scope.row)" />
          <el-link class="margin-left-10" type="danger" :underline="false" icon="el-icon-close" @click="onDeleteNode(scope.row)" />
          <el-dropdown class="margin-left-10" @command="(command) => onCommandNode(command, scope.row)">
            <el-link type="primary" :underline="false" icon="el-icon-plus" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="children">{{ $t('standard.addItemChildren') }}</el-dropdown-item>
              <el-dropdown-item command="sibling">{{ $t('standard.addItemSibling') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <div>
      <el-button type="primary" size="small" @click="onSubmit">Submit</el-button>
    </div>

    <prop-select-dialog v-model="propSelectDialog" :prop-tree="standard.PropList" />

  </div>
</template>

<script>
import PropSelectDialog from '@/views/standard/components/PropSelectDialog'
import { createStandardItem, updateStandardItem } from '@/api/standard'

export default {
  name: 'StandardItemDetail',
  components: { PropSelectDialog },
  props: {
    standard: {
      type: Object,
      default() {
        return {}
      }
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      itemTree: [
        { Id: new Date().getTime(), Title: 'Title', Value: '', PropIdList: [], FileList: [] },
        { Id: new Date().getTime() + 1, Title: 'TxType', Value: '', PropIdList: [], FileList: [] },
        { Id: new Date().getTime() + 2, Title: 'Test Site', Value: '', PropIdList: [], FileList: [] },
        { Id: new Date().getTime() + 3, Title: 'Data Form', Value: '', PropIdList: [], FileList: [] },
        { Id: new Date().getTime() + 4, Title: 'EnvList', Value: '', PropIdList: [], FileList: [] },
        { Id: new Date().getTime() + 5, Title: 'Remark', Value: '', PropIdList: [], FileList: [] }
      ],
      propSelectDialog: {
        show: false,
        title: '',
        form: {
          propIdList: []
        }
      }
    }
  },
  methods: {
    onCommandNode(command, node) {
      if (command === 'children') {
        if (!node.ChildrenList) {
          this.$set(node, 'ChildrenList', [])
        }
        node.ChildrenList.push({ Id: new Date().getTime(), Title: '', Value: '', PropIdList: [], FileList: [] })
      } else if (command === 'sibling') {
        this.insertSiblingNode(this.itemTree, node)
      }
    },
    onDeleteNode(node) {
      this.deleteNode(this.itemTree, node)
    },
    deleteNode(nodeList, node) {
      for (let i = 0; i < nodeList.length; i++) {
        if (nodeList[i].Id === node.Id) {
          nodeList.splice(i, 1)
          break
        }
        if (nodeList[i].ChildrenList) {
          this.deleteNode(nodeList[i].ChildrenList, node)
        }
      }
    },
    insertSiblingNode(nodeList, node) {
      for (let i = 0; i < nodeList.length; i++) {
        if (nodeList[i].Id === node.Id) {
          nodeList.splice(i + 1, 0, { Id: new Date().getTime(), Title: '', Value: '', PropIdList: [], FileList: [] })
          break
        }
        if (nodeList[i].ChildrenList) {
          this.insertSiblingNode(nodeList[i].ChildrenList, node)
        }
      }
    },
    onSelectPropIdList(row) {
      this.$set(this.propSelectDialog, 'title', this.$t('standard.selectProp'))
      this.$set(this.propSelectDialog, 'form', row)
      this.$set(this.propSelectDialog, 'show', true)
    },
    async onSubmit() {
      const data = this.isEdit ? await updateStandardItem(this.itemTree) : await createStandardItem(this.itemTree)
      if (data.Message === 'ok') {
        this.$notify({
          title: this.$t('standard.success'),
          message: this.isEdit ? this.$t('standard.editSuccessAlert') : this.$t(
            'standard.addSuccessAlert'),
          type: 'success',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
